<template>
    <div class="ablum">
        <div class="ablum_item"
        v-for="(item,index) in ablums"
        :key="index"
        >
            <div class="ablum_img" :style="{'background-image': 'url(' + albumCover + ')'}" @click="goAlbum(item.id)">
                <img :src="item.picUrl" alt="">
                <div>{{item.publishTime | dateFormat}}</div>
            </div>
            <div class="songs">
                <div class="title">{{item.name}}</div>
                <hotSongs v-if="hotSongs.length !=0" :hotSongs ="hotSongs[index].songs" />
            </div>
        </div>
    </div>
</template>

<script>
import hotSongs from '../../content/playList/hotSongs'
import {dateFomat} from '../../../util/tool'
import {_getAlbum} from '../../../network/detail'
export default {
    name: 'ablum',
    props: [
        'ablums'
    ],
    data() {
        return {
            albumCover:require('../../../assets/img/coverall.png'),
            hotSongs:[],
        };
    },
    computed: {

    },
    created() {
        
        // _getAlbum(this.ablums[0].id)
        // .then(res => {
        //     console.log(res.data)
        // })
    },
    mounted() {
        
    },
    watch: {
        ablums(val){
            val.forEach((val) => {
                _getAlbum(val.id)
                .then(res => {
                    console.log(res.data)
                    this.hotSongs.push(res.data)
                })
            })
        }
    },
    methods: {
        goAlbum(id){
            this.$router.push({path:'/Album',query:{id}})
        }
    },
    filters:{
        dateFormat(el){
            return dateFomat(el)
        }
    },
    components: {
        hotSongs,
    },
};
</script>

<style scoped lang="less">
@itemecolor:#E03F40;
@infoColor:#ccc;
@more:#666666;
@textColor:#fff;
@backColor:#2f3640;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.ablum{
    width: 100%;
        height: 500px;
        margin-top: 50px;
        color: #000;
    .ablum_item{
        .position_flex(flex-start,top);
        margin: 50px 0;
        .ablum_img{
            width:190px;
            height:150px;
            color: @textColor;
            font-size: 14px;
            cursor: pointer;
            background-position: -30px -1000px;
            div{
                margin-top: 10px;
            }
            img{
                width:150px;
                height:150px;
            }
        }
        .songs{
            width: 90%;
            margin-left: 10px;
            .title{
                color: @textColor;
            }
        }
    }
}
</style>
